import { useEffect, useState } from "react"
import BaseChart from "../../components/data-visiable/BaseChart"
import { Typography } from 'antd';
import { groupByCollege, groupByDay } from "../../api/data-api";
import _ from "lodash";
import { formatStdTime } from "../../utils/date-utils";
import { DatePicker, Space } from 'antd';

const { RangePicker } = DatePicker;

export default function CollegeAnalyse(props){

  const [option, setOption] = useState(null)

  const [rangeTime, setRangeTime] = useState(["2022-1-1", '2023-1-1']) 

  const loadDayData = ()=>{
    const param = {
      startTime: rangeTime[0], 
      endTime: rangeTime[1]
    }
    groupByCollege(param).then(
      resp=>{
        const data = resp.data.data
        let newData =  _.sortBy(data, o=>o?.num * -1)
        newData = newData.map(item=>{
          return {
            ...item,
          }
        })
        updateOption(newData)
      }
    )
  }

  const updateOption = (data)=>{
    const newOption = {
      dataset: {
        dimensions: ['source', 'num'],
        source: data
      },
      legend: {
        show: true
      },
      tooltip: {
        trigger: 'item'
      },
      xAxis: {
        type: 'category',
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '数量',
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        },
      ]
    };
    setOption(newOption)
  }

  const handleChangeTime = (date, dateString)=>{
    setRangeTime(dateString)
  }

  useEffect(()=>{
    loadDayData()
  }, [rangeTime])

  return <>
    <Typography.Title level={4}>论文发布院校分析</Typography.Title>
    <Typography.Text>起始时间点: </Typography.Text><RangePicker onChange={handleChangeTime} />
    <BaseChart options={option}></BaseChart>
  </>
}